import React,{useReducer,useEffect} from 'react'
import './indexGoods.css'
import {initState,reducer,actions,getList,getgoodsNav,getN,getShow} from './reducer'
import List from '../../../../components/List/List'
import { getIndexGoods } from '../../../../request/api'
export default function IndexGoods(props) {
    
    const [state, dispatch] = useReducer(reducer, initState)
    console.log(state);
    useEffect(() => {
        getIndexGoods().then(res=>{
            // getList(state) = res.list[getN(state)].content
            dispatch(actions.changeList(res.list))
           
        })
    }, [])
    return (
        <div>
            <div className="indexgoods_nav">
                {
                    getgoodsNav(state).map((item,index)=>{
                        return <span key={item} onClick={()=>dispatch(actions.changeN(index))} className={getN(state)===index?"active_span_index":""}>{item}</span>
                    })
                }
                {/* <span>综合推荐</span>
                <span>销量</span>
                <span>好评度</span>
                <span>店铺</span> */}
            </div>
            
            <List {...props} arr={getShow(state)} ></List>
        </div>
    )
}
